<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.thymeleaf.org/extras/sa-token">

<head th:replace="index::head">

</head>

<body>
	<!-- 导航栏 -->
	<ul class="layui-nav" th:replace="index::nav">

	</ul>

	<div>
		<div style="text-align: center;background-color: hsl(203, 51%, 51%);color: white;height: 150px;">
			<h1 style="padding: 50px">操作员管理</h1>
		</div>

		<button class="layui-btn layui-btn-normal" style="margin: 30px;" onclick="addUser()">新增</button>

		<div>
			<table class="layui-table" lay-even lay-skin="line" lay-size="lg" style="margin: 30px;">
				<colgroup>
					<col width="150">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th>ID</th>
						<th>用户名</th>
						<th>姓名</th>
						<th>电话</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<!-- 使用 Thymeleaf 循环渲染列表 -->
					<tr th:each="user : ${users}">
						<td th:text="${user.id}"></td>
						<td th:text="${user.username}"></td>
						<td th:text="${user.name}"></td>
						<td th:text="${user.phone}"></td>
						<td>
							<a class="layui-btn layui-btn-xs layui-btn-normal"  th:onclick="|edit(${user.id})|">编辑</a>
							<a th:onclick="|del(${user.id})|" class="layui-btn layui-btn-xs layui-btn-danger">删除</a>
							<a th:onclick="|resetPassword(${user.id})|"
								class="layui-btn layui-btn-xs layui-btn-warm">重置密码</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<!-- <form class="layui-form"  lay-filter="testform">
		<div class="layui-form-item">
			<label class="layui-form-label">姓名</label>
			<div class="layui-input-block">
				<input type="text" name="name" value="" required lay-verify="required" placeholder="请输入姓名"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">用户名</label>
			<div class="layui-input-block">
				<input type="text" name="username" value="" required lay-verify="required" placeholder="请输入用户名"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">密码</label>
			<div class="layui-input-block">
				<input type="text" name="password" value="" required lay-verify="required" placeholder="请输入密码"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label" for="roleSelect">角色</label>
			<div class="layui-input-block">
				<select name="role" id="roleSelect" lay-verify="required">
					<option value="user">操作员</option>
					<option value="admin">管理员</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form> -->
</body>
<script>
	function edit(id){
		$.get("/user/get/"+id,function(data){
			if(data.code===200){
				user=data.data;
				layui.use(['layer'], function (args) {
			var layer = layui.layer;
			var form = layui.form;
			layer.open({
				type: 1,//1 dom或文本，2 iframe,3 加载层,4 tips
				shadeClose: true,
				title: '编辑操作员',
				area: ['auto', 'auto'],
				content: `
		  <form class="layui-form"  lay-filter="testform">
		<div class="layui-form-item">
			<input type="hidden" name="id" value="${user.id}">
			<label class="layui-form-label">姓名</label>
			<div class="layui-input-block">
				<input type="text" name="name" value="${user.name}" required lay-verify="required" placeholder="请输入姓名"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">用户名</label>
			<div class="layui-input-block">
				<input type="text" name="username" value="${user.username}" required lay-verify="required" placeholder="请输入用户名"
					autocomplete="off" class="layui-input">
			</div>
		</div>
				<div class="layui-form-item">
			<label class="layui-form-label">电话</label>
			<div class="layui-input-block">
				<input type="text" name="phone" value="${user.phone}" required lay-verify="required" placeholder="请输入电话"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label" for="roleSelect">角色</label>
			<div class="layui-input-block">
				<select name="role" id="roleSelect" lay-verify="required">
					<option value="user">操作员</option>
					<option value="admin">管理员</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo2">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>`,
				success: function (layero) {
					$('#roleSelect').val(user.role);
					form.render();
				}
			});

		});
			}
		})	
	}

	function addUser() {
		layui.use(['layer'], function (args) {
			var layer = layui.layer;
			var form = layui.form;
			layer.open({
				type: 1,//1 dom或文本，2 iframe,3 加载层,4 tips
				shadeClose: true,
				title: '新增操作员',
				area: ['auto', 'auto'],
				content: `
		  <form class="layui-form"  lay-filter="testform">
		<div class="layui-form-item">
			<label class="layui-form-label">姓名</label>
			<div class="layui-input-block">
				<input type="text" name="name" value="" required lay-verify="required" placeholder="请输入姓名"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">用户名</label>
			<div class="layui-input-block">
				<input type="text" name="username" value="" required lay-verify="required" placeholder="请输入用户名"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">密码</label>
			<div class="layui-input-block">
				<input type="password" name="password" value="" required lay-verify="required" placeholder="请输入密码"
					autocomplete="off" class="layui-input">
			</div>
		</div>
				<div class="layui-form-item">
			<label class="layui-form-label">电话</label>
			<div class="layui-input-block">
				<input type="text" name="phone" value="" required lay-verify="required" placeholder="请输入电话"
					autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label" for="roleSelect">角色</label>
			<div class="layui-input-block">
				<select name="role" id="roleSelect" lay-verify="required">
					<option value="user">操作员</option>
					<option value="admin">管理员</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>`,
				success: function (layero) {
					form.render();
				}
			});

		});
	}

	function del(id) {
		layer.confirm('确定要删除这条吗？', {
			btn: ['删除', '取消']
		}, function () {
			$.get('/user/remove/' + id, function (data) {
				if (data.code === 200) {
					layer.msg('删除OK');
					setTimeout(() => {
						window.location.reload();
					}, 1400);
				}

			})
		}, function () {

		});

	}

	function resetPassword(id) {
		layer.prompt({ title: '请输入新密码，再确认', formType: 0 }, function (val, index) {
			$.post('/user/update/', {
				password: val,
				id: id
			}, function (data) {
				if (data.code === 200) {
					layer.msg('密码修改OK');
					setTimeout(() => {
						window.location.reload();
					}, 1400);
				}

			})
		});
	}

	layui.use(['layer'], function (args) {
		var layer = layui.layer;
		var form = layui.form;

		form.on('submit(formDemo)', function (data) {
			$.post('/user/register', data.field, function (data) {
				if (data.code === 200) {
					layer.msg('添加OK');
					setTimeout(() => {
						layer.closeAll();
						window.location.reload();
					}, 1400);
				}
			})
			return false;
		});


		form.on('submit(formDemo2)', function (data) {
			$.post('/user/update', data.field, function (data) {
				if (data.code === 200) {
					layer.msg('更新OK');
					setTimeout(() => {
						layer.closeAll();
						window.location.reload();
					}, 1400);
				}
			})
			return false;
		});
	});

</script>

</html>